<template>
	<view class="root">
		<!-- <view class="header">
			<view class="back-btn" @click="go_back">
				<up-icon name="arrow-left" color="#333333" bold size="38rpx"></up-icon>
			</view>
		</view> -->
		<up-form labelPosition="top" :labelStyle="lableStyle" :model="model" :rules="rules" ref="form">
			<view
				style="padding: 20rpx 40rpx; padding-bottom: 80rpx;  border-radius: 25rpx; margin-bottom: 50rpx; background-color: white;">
				<up-form-item prop="name" label="姓名">
					<view class="input">
						<input @input="onPhoneInput" v-model="model.name" placeholder="请输入姓名" />
					</view>
				</up-form-item>
				<up-form-item label="性别" prop="gender">
					<view class="selectInput" @click="showGender = true">
						<!-- <up-icon name="list" color="#999" size="28rpx" bold></up-icon> -->
						<text style="color:#999;" v-if="model.gender === ''">选择性别</text>
						<text v-else>{{ model.gender==1?'男':'女' }}</text>
					</view>
				</up-form-item>
				<up-form-item labelWidth="160rpx" prop="birthdate" label="出生日期">
					<view class="selectInput" @click="showBirthday = true">
						<!-- <up-icon name="list" color="#999" size="28rpx" bold></up-icon> -->
						<text style="color:#999;" v-if="model.birthdate === ''">选择出生日期</text>
						<text v-else>{{ model.birthdate }}</text>
					</view>
				</up-form-item>
			</view>
			<view
				style="padding: 20rpx 40rpx; padding-bottom: 80rpx;  border-radius: 25rpx; margin-bottom: 50rpx; background-color: white;">
				<view class="">
					<view class="title margin-bottom-21">
						<text>眼睛度数（球镜/DS/Sph）</text>
					</view>
					<view class="tow-column margin-bottom-35">
						<view class="row" @click="setActive('sphericalLeft')">
							<view :class="['t_input', activeField === 'sphericalLeft' ? 'active' : '']">
								<view class="label">
									<text>左眼</text>
								</view>
								<text class="divider"></text>
								<text>{{model.sphericalLeft}}</text>
								<up-icon :color="isActive('sphericalLeft') ? activeColor : defaultColor" name="list"
									size="28rpx" bold></up-icon>
							</view>
						</view>
						<view class="row" @click="setActive('sphericalRight')">
							<view :class="['t_input', activeField === 'sphericalRight' ? 'active' : '']">
								<view class="label">
									<text>右眼</text>
								</view>
								<text class="divider"></text>
								<text>{{model.sphericalRight}}</text>
								<up-icon :color="isActive('sphericalRight') ? activeColor : defaultColor" name="list"
									size="28rpx" bold></up-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="">
					<view class="title margin-bottom-21">
						<text>散光度数（柱镜/DC/Cyl）</text>
					</view>
					<view class="tow-column margin-bottom-35">
						<view class="row" @click="setActive('cylindricalLeft')">
							<view :class="['t_input', activeField === 'cylindricalLeft' ? 'active' : '']">
								<view class="label">
									<text>左眼</text>
								</view>
								<text class="divider"></text>
								<text>{{model.cylindricalLeft}}</text>
								<up-icon :color="isActive('cylindricalLeft') ? activeColor : defaultColor" name="list"
									size="28rpx" bold></up-icon>
							</view>
						</view>
						<view class="row" @click="setActive('cylindricalRight')">
							<view :class="['t_input', activeField === 'cylindricalRight' ? 'active' : '']">
								<view class="label">
									<text>右眼</text>
								</view>
								<text class="divider"></text>
								<text>{{model.cylindricalRight}}</text>
								<up-icon :color="isActive('cylindricalRight') ? activeColor : defaultColor" name="list"
									size="28rpx" bold></up-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="">
					<view class="title margin-bottom-21">
						<text>轴位（轴位/Axis/A）</text>
					</view>
					<view class="tow-column margin-bottom-35">
						<view class="row" @click="setActive('axisLeft')">
							<view :class="['t_input', activeField === 'axisLeft' ? 'active' : '']">
								<view class="label">
									<text>左眼</text>
								</view>
								<text class="divider"></text>
								<text v-if="model.axisLeft">{{model.axisLeft + '°'}}</text>
								<up-icon :color="isActive('axisLeft') ? activeColor : defaultColor" name="list"
									size="28rpx" bold></up-icon>
							</view>
						</view>
						<view class="row" @click="setActive('axisRight')">
							<view :class="['t_input', activeField === 'axisRight' ? 'active' : '']">
								<view class="label">
									<text>右眼</text>
								</view>
								<text class="divider"></text>
								<text v-if="model.axisRight">{{model.axisRight + '°'}}</text>
								<up-icon :color="isActive('axisRight') ? activeColor : defaultColor" name="list"
									size="28rpx" bold></up-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="">
					<view class="title margin-bottom-21">
						<text style="color: red;">*</text>
						<text>视力矫正（CC）</text>
					</view>
					<view class="tow-column margin-bottom-35">
						<view class="row" @click="setActive('ccVaLeft')">
							<view :class="['t_input', activeField === 'ccVaLeft' ? 'active' : '']">
								<view class="label">
									<text>左眼</text>
								</view>
								<text class="divider"></text>
								<text>{{model.ccVaLeft}}</text>
								<up-icon :color="isActive('ccVaLeft') ? activeColor : defaultColor" name="list"
									size="28rpx" bold></up-icon>
							</view>
						</view>
						<view class="row" @click="setActive('ccVaRight')">
							<view :class="['t_input', activeField === 'ccVaRight' ? 'active' : '']">
								<view class="label">
									<text>右眼</text>
								</view>
								<text class="divider"></text>
								<text>{{model.ccVaRight}}</text>
								<up-icon :color="isActive('ccVaRight') ? activeColor : defaultColor" name="list"
									size="28rpx" bold></up-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="">
					<view class="title margin-bottom-21">
						<text style="color: red;">*</text>
						<text>裸眼视力（SC）</text>
					</view>
					<view class="tow-column margin-bottom-35">
						<view class="row" @click="setActive('scVaLeft')">
							<view :class="['t_input', activeField === 'scVaLeft' ? 'active' : '']">
								<view class="label">
									<text>左眼</text>
								</view>
								<text class="divider"></text>
								<text>{{model.scVaLeft}}</text>
								<up-icon :color="isActive('scVaLeft') ? activeColor : defaultColor" name="list"
									size="28rpx" bold></up-icon>
							</view>
						</view>
						<view class="row" @click="setActive('scVaRight')">
							<view :class="['t_input', activeField === 'scVaRight' ? 'active' : '']">
								<view class="label">
									<text>右眼</text>
								</view>
								<text class="divider"></text>
								<text>{{model.scVaRight}}</text>
								<up-icon :color="isActive('scVaRight') ? activeColor : defaultColor" name="list"
									size="28rpx" bold></up-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="">
					<view class="title margin-bottom-21">
						<text>眼轴长度（AL）</text>
					</view>
					<view class="tow-column margin-bottom-35">
						<view class="row" @click="setActive('axialLengthLeft')">
							<view :class="['t_input', activeField === 'axialLengthLeft' ? 'active' : '']"
								style="padding: 0; padding-left: 5rpx;">
								<view class="label">
									<text>左眼</text>
								</view>
								<text class="divider"></text>
								<input type="number" v-model.number="model.axialLengthLeft" style="height: 100%; width: 65%;"
									@blur="closePicker" />
							</view>
						</view>
						<view class="row" @click="setActive('axialLengthRight')">
							<view :class="['t_input', activeField === 'axialLengthRight' ? 'active' : '']"
								style="padding: 0; padding-left: 5rpx;">
								<view class="label">
									<text>右眼</text>
								</view>
								<text class="divider"></text>
								<input type="number" v-model.number="model.axialLengthRight" style="height: 100%; width: 65%;"
									@blur="closePicker" />
							</view>
						</view>
					</view>
				</view>
				<view class="">
					<view class="title margin-bottom-21">
						<text>角膜曲率</text>
					</view>
					<view class="tow-column margin-bottom-35">
						<view class="row" @click="setActive('keratometryLeft')">
							<view :class="['t_input', activeField === 'keratometryLeft' ? 'active' : '']">
								<view class="label">
									<text>K1</text>
								</view>
								<text class="divider"></text>
								<text v-if="model.keratometryLeft">{{model.keratometryLeft + 'D'}}</text>
								<up-icon :color="isActive('keratometryLeft') ? activeColor : defaultColor" name="list"
									size="28rpx" bold></up-icon>
							</view>
						</view>
						<view class="row" @click="setActive('keratometryRight')">
							<view :class="['t_input', activeField === 'keratometryRight' ? 'active' : '']">
								<view class="label">
									<text>K2</text>
								</view>
								<text class="divider"></text>
								<text v-if="model.keratometryRight">{{model.keratometryRight + 'D'}}</text>
								<up-icon :color="isActive('keratometryRight') ? activeColor : defaultColor" name="list"
									size="28rpx" bold></up-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view
				style="padding: 20rpx 40rpx; padding-bottom: 80rpx;  border-radius: 25rpx; margin-bottom: 50rpx; background-color: white;">
				<up-form-item label="斜视">
					<up-radio-group activeColor="#0A9647" v-model="model.strabismus">
						<up-radio :customStyle="{marginRight: '10rpx'}" v-for="(item, index) in strabismusList"
							:key="index" :label="item.name" :name="item.value">
						</up-radio>
					</up-radio-group>
				</up-form-item>
				<up-form-item label="视弱">
					<up-radio-group activeColor="#0A9647" v-model="model.visualField">
						<up-radio :customStyle="{marginRight: '10rpx'}" v-for="(item, index) in strabismusList"
							:key="index" :label="item.name" :name="item.value">
						</up-radio>
					</up-radio-group>
				</up-form-item>
				<up-form-item labelWidth="180rpx" label="眼科手术史">
					<up-radio-group activeColor="#0A9647" v-model="model.eyeSurgeryHistory">
						<up-radio :customStyle="{marginRight: '10rpx'}" v-for="(item, index) in strabismusList"
							:key="index" :label="item.name" :name="item.value">
						</up-radio>
					</up-radio-group>
				</up-form-item>
				<up-form-item labelWidth="180rpx" label="药物过敏史">
					<up-radio-group activeColor="#0A9647" v-model="model.drugAllergyHistory">
						<up-radio :customStyle="{marginRight: '10rpx'}" v-for="(item, index) in strabismusList"
							:key="index" :label="item.name" :name="item.value">
						</up-radio>
					</up-radio-group>
				</up-form-item>
			</view>
		</up-form>
		<view class="footer margin-bottom-21">
			<text style="margin-right: 11rpx;font-size: 50rpx;vertical-align: middle;">“</text>
			<text>爱护眼睛，让生命的阳光更精彩。</text>
		</view>

		<view class="startbtn" @click="sub">
			<text>开启您的专属护眼课程吧</text>
			<view class="icon">
				<view class="arrow"></view>
			</view>
		</view>
	</view>

	<up-action-sheet :show="showGender" @select="sexSelect" title="请选择性别" @close="showGender = false"
		:actions="genderList"></up-action-sheet>
	<up-datetime-picker closeOnClickOverlay v-model="maxTime" :minDate="minDate" :maxDate="maxDate" :show="showBirthday"
		mode="date" @confirm="birthdayConfirm" @cancel="birthdayClose" @close="birthdayClose"></up-datetime-picker>
	<up-picker @cancel="closePicker" @confirm="confirmPicker" v-model:show="showPicker" :columns="selectOptions"
		keyName="label" valueName="value"></up-picker>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		test,
		toast,
		timeFormat
	} from '@/node_modules/uview-plus'
	import {
		createExamination
	} from '@/api/index.js'
	onLoad((options) => {

	})
	const maxTime = Date.now()
	const maxDate = ref(maxTime)
	const minDate = ref(0)
	const inputStyle = ref({
		backgroundColor: '#F5F5F5',
		padding: '8rpx'
	})
	const lableStyle = ref({
		fontSize: '32rpx',
		color: '#7D8B9F'
	})
	const model = ref({
		name: '',
		gender: '',
		birthdate: '',
		sphericalLeft: '',
		sphericalRight: '',
		cylindricalLeft: '',
		cylindricalRight: '',
		axisLeft: '',
		axisRight: '',
		ccVaLeft: '',
		ccVaRight: '',
		scVaLeft: '',
		scVaRight: '',
		axialLengthLeft: '',
		axialLengthRight: '',
		keratometryLeft: '',
		keratometryRight: '',
		strabismus: false,
		visualField: false,
		eyeSurgeryHistory: false,
		drugAllergyHistory: false

	})

	const rules = ref({
		'name': {
			type: 'string',
			required: true,
			message: '请填写姓名',
			trigger: ['blur', 'change'],
		},
		'gender': {
			required: true,
			message: '请选择性别',
			trigger: ['blur', 'change'],
		},
		'birthdate': {
			required: true,
			message: '出生日期不可为空',
			trigger: ['blur', 'change'],
		},
		'sphericalLeft': {
			type: "number",
			required: true,
			message: '不可为空',
			trigger: ['blur', 'change'],
		},
		'cylindricalLeft': {
			type: "number",
			required: true,
			message: '不可为空',
			trigger: ['blur', 'change'],
		},
		'cylindricalRight': {
			type: "number",
			required: true,
			message: '不可为空',
			trigger: ['blur', 'change'],
		},
		'sphericalRight': {
			type: "number",
			required: true,
			message: '不可为空',
			trigger: ['blur', 'change'],
		},
		'axisLeft': {
			type: "number",
			required: true,
			message: '不可为空',
			trigger: ['blur', 'change'],
		},
		'axisRight': {
			type: "number",
			required: true,
			message: '不可为空',
			trigger: ['blur', 'change'],
		},
		'ccVaLeft': {
			type: "number",
			required: true,
			message: '不可为空',
			trigger: ['blur', 'change'],
		},
		'ccVaRight': {
			type: "number",
			required: true,
			message: '不可为空',
			trigger: ['blur', 'change'],
		},
		'scVaLeft': {
			type: "number",
			required: true,
			message: '不可为空',
			trigger: ['blur', 'change'],
		},
		'scVaRight': {
			type: "number",
			required: true,
			message: '不可为空',
			trigger: ['blur', 'change'],
		},
		'axialLengthLeft': {
			type: "number",
			required: true,
			message: '不可为空',
			trigger: ['blur', 'change'],
		},
		'axialLengthRight': {
			type: "number",
			required: true,
			message: '不可为空',
			trigger: ['blur', 'change'],
		},
		'keratometryLeft': {
			type: "number",
			required: true,
			message: '不可为空',
			trigger: ['blur', 'change'],
		},
		'keratometryRight': {
			type: "number",
			required: true,
			message: '不可为空',
			trigger: ['blur', 'change'],
		},
	})


	const activeField = ref("");
	const activeColor = '#27A25C' // 激活色（你原来用的）
	const defaultColor = '#7D8B9F' // 非激活色
	const selectOptions = ref([])
	const showPicker = ref(false)
	const isActive = (key) => activeField.value === key
	const setActive = (field) => {
		activeField.value = activeField.value === field ? '' : field
		selectOptions.value.length = 0
		if (activeField.value === 'sphericalLeft' || activeField.value === 'sphericalRight') {
			showPicker.value = activeField.value ? true : false
			selectOptions.value.push(degreeOptions)
		}
		if (activeField.value === 'cylindricalLeft' || activeField.value === 'cylindricalRight') {
			showPicker.value = activeField.value ? true : false
			selectOptions.value.push(astigmatismOptions)
		}
		if (activeField.value === 'axisLeft' || activeField.value === 'axisRight') {
			showPicker.value = activeField.value ? true : false
			selectOptions.value.push(axisOptions)
		}
		if (activeField.value === 'ccVaLeft' || activeField.value === 'ccVaRight') {
			showPicker.value = activeField.value ? true : false
			selectOptions.value.push(acuityOptions)
		}
		if (activeField.value === 'scVaLeft' || activeField.value === 'scVaRight') {
			showPicker.value = activeField.value ? true : false
			selectOptions.value.push(nakedVisionOptions)
		}
		if (activeField.value === 'keratometryLeft' || activeField.value === 'keratometryRight') {
			showPicker.value = activeField.value ? true : false
			selectOptions.value.push(curvatureList)
		}
	};
	// 近视度数
	const degreeOptions = [];
	for (let i = -40; i <= 40; i++) {
		const val = +(i * 0.25).toFixed(2); // 转为数值
		degreeOptions.push({
			label: val.toFixed(2),
			value: val
		});
	}

	// 散光度数
	const astigmatismOptions = [];
	for (let i = -32; i <= 32; i++) {
		const val = +(i * 0.25).toFixed(2);
		astigmatismOptions.push({
			label: val.toFixed(2),
			value: val
		});
	}

	// 轴位
	const axisOptions = [];
	for (let i = 0; i <= 180; i++) {
		axisOptions.push({
			label: i + '°',
			value: i
		}); // 本来就是数值
	}

	// 矫正视力
	const acuityOptions = [];
	for (let i = 2; i <= 12; i++) {
		const val = +(i / 10).toFixed(1);
		acuityOptions.push({
			label: val.toFixed(1),
			value: val
		});
	}

	// 裸眼视力
	const nakedVisionOptions = [];
	for (let i = 40; i <= 52; i++) {
		const val = +(i / 10).toFixed(1);
		nakedVisionOptions.push({
			label: val.toFixed(1),
			value: val
		});
	}

	// 角膜曲率
	const curvatureList = [];
	for (let v = 39.0; v <= 46.0; v += 0.1) {
		const val = +v.toFixed(1);
		curvatureList.push({
			label: val.toFixed(1) + 'D',
			value: val
		});
	}

	const closePicker = () => {
		showPicker.value = false
		activeField.value = ''
	}

	const confirmPicker = (val) => {
		showPicker.value = false
		console.log(val.value[0].value);
		model.value[activeField.value] = val.value[0].value
		activeField.value = ''
	}


	const showGender = ref(false)
	const genderList = ref([{
			id: '1',
			name: '男'
		},
		{
			id: '2',
			name: '女'
		}
	])
	const form = ref()

	function sexSelect(e) {
		model.value.gender = e.id;
		if (form.value) {
			form.value.validateField('model.gender');
		}
	}

	const showBirthday = ref(false)

	function birthdayClose() {
		showBirthday.value = false
		form.value.validateField('userInfo.birthdate')
	}

	function birthdayConfirm(e) {
		showBirthday.value = false
		model.value.birthdate = timeFormat(e.value, 'yyyy-mm-dd')
		form.value.validateField('userInfo.birthdate')
	}

	const strabismusList = ref([{
		name: '是',
		value: true
	}, {
		name: '否',
		value: false
	}])

	const go_back = () => {
		uni.navigateBack({
			delta: 1
		})
	}

	const sub = () => {
		form.value.validate().then(res => {
			// 判断矫正视力与裸眼视力不可为空
			if (model.value.ccVaLeft === '' || model.value.ccVaRight === '') {
				return toast('视力矫正不可为空');
			}
			if (model.value.scVaLeft === '' || model.value.scVaRight === '') {
				return toast('裸眼视力不可为空');
			}
			createExamination(
				model.value,
			).then(res => {
				console.log(res);
				if (res.code === 200) {
					toast('保存成功');
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/main/index'
						})
					}, 1500)
				}else {
					toast(res.message)
				}
			})
		}).catch(errors => {
			toast('请完善表单')
		})
	}
</script>
<style lang="less" scoped>
	.t_input {
		width: 249rpx;
		height: 90rpx;
		line-height: 70rpx;
		padding: 0 20rpx;
		background-color: #F5F5F5;
		border-radius: 14rpx;
		box-sizing: border-box;
		font-family: PingFangSC, PingFang SC;
		font-weight: 300;
		font-size: 32rpx;
		color: #7D8B9F;
		border: 2rpx solid transparent;
		position: relative;
		display: flex;
		align-items: center;
		transition: .3s;

		:deep(.u-icon__icon) {
			position: absolute;
			right: 18rpx;
			top: 0;
			bottom: 0;
		}
	}

	.t_input.active {
		border-color: #0A9647;
		color: #0A9647;
	}

	.t_input.active .divider {
		background-color: #0A9647;
	}

	.t_input.active .icon {
		color: #0A9647;
	}

	.divider {
		margin: 0 10rpx;
		display: inline-block;
		width: 4rpx;
		height: 35rpx;
		background-color: #7D8B9F;
	}


	.selectInput {
		flex: 1;
		min-width: 219rpx;
		height: 83rpx;
		line-height: 83rpx;
		position: relative;
		background-color: #F5F5F5;
		border-radius: 20rpx;
		padding: 0 10rpx;
		box-sizing: border-box;
		font-family: PingFangSC, PingFang SC;
		position: relative;
		font-weight: 500;
		font-size: 26rpx;
		color: #000000;
		padding-left: 35rpx;
	}

	.margin-bottom-21 {
		margin-bottom: 21rpx;
	}

	.margin-bottom-35 {
		margin-bottom: 35rpx;
	}

	.margin-bottom-86 {
		margin-bottom: 86rpx;
	}

	.margin-bottom-95 {
		margin-bottom: 95rpx;
	}

	.margin-bottom-114 {
		margin-bottom: 114rpx;
	}

	.root {
		min-height: 100vh;
		background-color: #f1f1f1;
		padding: 30rpx 60rpx;
		box-sizing: border-box;

		.header {
			padding-left: 42rpx;
			margin-bottom: 79rpx;

			.back-btn {
				width: 123rpx;
				height: 123rpx;
				background: #F5F5F5;
				border-radius: 50%;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}
		}

		.tow-column {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.row {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				column-gap: 23rpx;

				.label {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.input {
					width: 219rpx;
					position: relative;

					input {
						width: 100%;
						height: 70rpx;
						background-color: #F5F5F5;
						border-radius: 14rpx;
						padding: 0 26rpx;
						box-sizing: border-box;
						font-family: PingFangSC, PingFang SC;
						font-weight: 300;
						font-size: 32rpx;
						color: #000000;
					}
				}

				.selectInput {
					width: 219rpx;
					height: 70rpx;
					line-height: 70rpx;
					position: relative;
					background-color: #F5F5F5;
					border-radius: 14rpx;
					padding: 0 26rpx;
					box-sizing: border-box;
					font-family: PingFangSC, PingFang SC;
					font-weight: 300;
					font-size: 32rpx;
					color: #000000;
					position: relative;

					:deep(.u-icon__icon) {
						position: absolute;
						right: 18rpx;
						top: 0;
						bottom: 0;
					}
				}
			}
		}

		.one-row {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			column-gap: 16rpx;
			padding: 0 32rpx 0 42rpx;

			.label {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #000000;
				letter-spacing: 2rpx;
			}

			.longSelect {
				flex: 1;
				height: 70rpx;
				line-height: 70rpx;
				background: #F5F5F5;
				border-radius: 14rpx;
				position: relative;

				:deep(.u-icon__icon) {
					position: absolute;
					right: 18rpx;
					top: 0;
					bottom: 0;
				}
			}
		}

		.title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #95A0B1;
			letter-spacing: 2rpx;
		}

		.checkBox {
			padding: 0 42rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;

			.label {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				margin-right: 19rpx;
			}

			.item {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				column-gap: 5rpx;

				.circle {
					width: 32rpx;
					height: 32rpx;
					border: 2rpx solid #B8B6B6;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					border-radius: 50%;

					.isselect {
						width: 21rpx;
						height: 21rpx;
						background-color: #0A9647;
						border-radius: 50%;
					}
				}
			}
		}

		.footer {
			margin: 0 auto;
			margin-top: 90rpx;
			text-align: right;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 21rpx;
			color: #0A9647;
		}

		.startbtn {
			padding: 40rpx 47rpx 39rpx 40rpx;
			box-sizing: border-box;
			margin: 0 auto;
			margin-bottom: 140rpx;
			background: #0A9647;
			border-radius: 35rpx;
			color: #fff;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.icon {
				width: 72rpx;
				height: 2rpx;
				background-color: #fff;
				position: relative;

				.arrow {
					width: 16rpx;
					height: 16rpx;
					background: linear-gradient(45deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%);
					position: absolute;
					top: 0;
					bottom: 0;
					right: 0;
					margin: auto 0;
					transform: rotateZ(45deg);
				}
			}
		}
	}



	.input {
		position: relative;
		width: 100%;

		:deep(.u-icon__icon) {
			position: absolute;
			right: 42rpx;
			top: 0;
			bottom: 0;
		}

		input {
			width: 100%;
			height: 83rpx;
			background-color: #F5F5F5;
			border-radius: 20rpx;
			padding-left: 35rpx;
			padding-right: 100rpx;
			box-sizing: border-box;
			font-weight: 500;
			font-size: 26rpx;
			color: #000000;
			border: 2rpx solid #F5F5F5;
			transition: .3s;
		}

		input:hover,
		input:focus {
			border: 2rpx solid #0A9647;
		}
	}
</style>